<template>
	<view>
		<!-- 商品详情 -->
		<view class="box">
			<!-- 轮播图 -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000" :duration="500">
					<swiper-item v-for="item in list" :key="item.id">
						<view class="swiper-item uni-bg-red"><image class="imges" :src="item.img" alt="" /></view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 详情信息 -->
			<view class="box5">
				<view class="box6">
					<view>
						<text class="xiao">￥</text>
						<text class="qian">0.01</text>
						<text class="youyuanjia">￥6699.00</text>
					</view>
					<view>
						<text class="youce">已售5483179件</text>
					</view>
				</view>
				<view class="shouji">三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23</view>
				<!-- 七天无理由退货 -->
				<view class="box8">
					<view class="box8-q">
						<text class="box8-q-q">七天无理由退货</text>
						<text>48小时发货</text>
					</view>
					<view>
						<text><button @click="open">打开弹窗</button></text>
					</view>
				</view>
				<!-- 商品评价 -->
				<view class="pingjia">
					<view>商品评价 ( 14条 )</view>
					<view>查看更多 ></view>
				</view>
			</view>
		</view>
		<!-- 商品描述 -->
		<view class="sahngpinmaoshu">商品描述</view>
		<!-- 商品描述 图片 -->
		<view class="miaoshutupian">
			<image src="https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"></image>
		</view>
		<view class="miaoshutupian">
			<image src="https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"></image>
		</view>
		<view class="miaoshutupian">
			<image src="https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"></image>
		</view>
		<!-- 底部弹出 -->
		<uni-popup ref="popup" type="bottom">
			<view class="button-popup">
				<view class="fuwu">服务</view>
				<view class="qitian">
					<view>
						<view>七天无理由退货</view>
						<view class="qitian-top">满足相应条件时，消费者可申请7天无理由退货</view>
					</view>
					<view>
						<view class="sishibaxiaoshi">48小时发货</view>
						<view class="qitian-top">下单后48小时之内发货</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue'
//轮播图数据
const list = ref([
	{
		id: 1,
		img: 'https://img.yzcdn.cn/vant/ipad.jpeg'
	},
	{
		id: 2,
		name: '商品2',
		price: 200,
		img: 'https://img.yzcdn.cn/vant/ipad.jpeg',
		num: 1,
		checked: false
	},
	{
		id: 3,
		name: '商品3',
		price: 300,
		img: 'https://img.yzcdn.cn/vant/ipad.jpeg',
		num: 1,
		checked: false
	}
])
//打开弹层
const popup = ref(null)
function open() {
	popup.value.open()
}
</script>

<style lang="scss">
.pingjia {
	display: flex;
	justify-content: space-between;
	padding: 20px 30px;
	font-size: 28rpx;
}
.miaoshutupian {
	// width: 100%;
	// height: 100%;
	// background-color: #fa2209;
}
.sahngpinmaoshu {
	padding: 26rpx 30rpx;
	font-size: 28rpx;
}
.qitian {
	.sishibaxiaoshi {
		margin-top: 80rpx;
	}
	font-size: 25rpx;
	padding: 0 30px 0 80px;
	.qitian-top {
		margin-top: 20rpx;
	}
}
.fuwu {
	font-size: 30rpx;
	margin-bottom: 50rpx;
	font-weight: 700;
	text-align: center;
}
.button-popup {
	height: 530rpx;
	padding: 24rpx;
	background-color: #fff;
	//上边框圆角
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
}
.box5 {
	padding: 25rpx 30rpx;
	.shouji {
		font-size: 25rpx;
	}
	.box8 {
		padding: 24px 30px;
		display: flex;
		justify-content: space-between;
		background-color: #fafafa;
		.box8-q {
			font-size: 26rpx;
			.box8-q-q {
				margin-right: 15rpx;
			}
		}
	}
	.box6 {
		display: flex;
		justify-content: space-between;
		.youce {
			font-size: 24rpx;
			color: #959595;
		}
		.xiao {
			font-size: 26rpx;
			line-height: 1;
			color: #fa2209;
		}
		.qian {
			color: #fa2209;
			margin-right: 15rpx;
			font-size: 42rpx;
		}
		.youyuanjia {
			font-size: 26rpx;
			text-decoration: line-through;
			color: #959595;
			margin-right: 15rpx;
			margin-bottom: -6rpx;
		}
	}
}
.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}
.swiper {
	height: 300rpx;
}
.swiper-item {
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	.imges {
		width: 480rpx;
		height: 480rpx;
		// border: 1px solid red;
	}
}
.swiper-list {
	margin-top: 40rpx;
	margin-bottom: 0;
}
.uni-common-mt {
	margin-top: 60rpx;
	position: relative;
}
.info {
	position: absolute;
	right: 20rpx;
}
.uni-padding-wrap {
	width: 550rpx;
	padding: 0 100rpx;
}
.swiper {
	height: 480rpx;
	// background-color: pink;
}
</style>
